<template>
	<view>
		<view class="top-nav">
			<scroll-view class="select-tabs" scroll-x="true">
				<view class="tabs-item" v-for="(t, i) in tabs" :key="i" :class="{selected: currentIndex === i}" @click="selectType(i)">
					{{t.title}}
				</view>
			</scroll-view>
			<view class="search-btn" @click="naviToSearch">
				<image src="../../static/icons/ss.png" mode="widthFix"></image>
			</view>
		</view>
		<u-gap height="100" bgColor="#fff"></u-gap>

		<keep-alive>
			<component :is="tabs[currentIndex].component"></component>
		</keep-alive>
	</view>
</template>

<script>
	import DailySign from '../../components/FindComponents/DailySign.vue'
	import ReadView from '../../components/FindComponents/ReadView.vue'
	import SpecialTopic from '../../components/FindComponents/SpecialTopic.vue'
	import Questions from '../../components/FindComponents/Questions.vue'
	import LongWriting from '../../components/FindComponents/LongWriting.vue'
	import SmallNotes from '../../components/FindComponents/SmallNotes.vue'
	import HotList from '../../components/FindComponents/HotList.vue'
	import BookShadow from '../../components/FindComponents/BookShadow.vue'
	import MusicView from '../../components/FindComponents/MusicView.vue'
	import WriterView from '../../components/FindComponents/WriterView.vue'

	export default {
		data() {
			return {
				currentIndex: 2,
				tabs: [{
						title: '阅读',
						component: ReadView.name
					},
					{
						title: '日签',
						component: DailySign.name
					},
					{
						title: '专题',
						component: SpecialTopic.name
					},
					{
						title: '问答',
						component: Questions.name
					},
					{
						title: '长篇',
						component: LongWriting.name
					},
					{
						title: '小记',
						component: SmallNotes.name
					},
					{
						title: '热榜',
						component: HotList.name
					},
					{
						title: '书影',
						component: BookShadow.name
					},
					{
						title: '音乐',
						component: MusicView.name
					},
					{
						title: '作者',
						component: WriterView.name
					}
				]
			}
		},
		components: {
			ReadView,
			DailySign,
			SpecialTopic,
			Questions,
			LongWriting,
			SmallNotes,
			HotList,
			BookShadow,
			MusicView,
			WriterView
		},
		methods: {
			selectType(index) {
				if (index !== this.currentIndex) {
					// console.log('selected');
					this.currentIndex = index
				}
			},
			naviToSearch() {
				uni.navigateTo({
					url: '../search/search'
				})
			}
		}
	}
</script>

<style lang="scss">
	* {
		box-sizing: border-box;
	}
	
	.top-nav {
		position: fixed;
		display: flex;
		width: 750rpx;
		z-index: 1000;
		background-color: #fff;
		
		.select-tabs {
			flex: 9;
			display: flex;
			white-space: nowrap;
			width: 80%;
			
			.tabs-item {
				display: inline-block;
				white-space: nowrap;
				margin: 10px 10px;
				font-size: 14px;
				text-align: center;
				color: rgba(7, 17, 27, .8);
				
				&.selected {
					position: relative;
					color: #000;
					font-weight: 700;
					font-size: 18px;
				}
			}
		}
		
		.search-btn {
			padding-top: 25rpx;
			flex: 1;
			text-align: center;
			
			image {
				width: 50rpx;
				height: 50rpx;
			}
		}
	}
</style>